<template>
  <section id="sounds" class="scroll-target px-8">
    <h2 class="text-3xl font-bold mb-8 mt-12 text-center">🔊 可用音效</h2>

      <h3 class="text-xl font-semibold mb-4 mt-12">🍎 Apple 同款音效</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        <SoundCard
          v-for="(zhName, enName) in apple"
          :key="enName"
          :en="enName"
          :zh="zhName"
        />
      </div>

      <h3 class="text-xl font-semibold mb-4 mt-12">🎧 其他音效</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        <SoundCard
          v-for="(zhName, enName) in other"
          :key="enName"
          :en="enName"
          :zh="zhName"
        />
      </div>
  </section>
</template>

<script setup >
import {apple,other} from '@/assets/data/map'
import SoundCard from "./SoundCard.vue";

</script>
